<template>
  <div>
    <div class="banner" v-if="isSeek">
      <div class="cont">
        <div class="search">
          <input
            class="input"
            type="text"
            placeholder="搜索你想要的商品"
            placeholder-style="color:#b1998d"
            v-model="seek"
            @change="seekChange"
            confirm-type="search"
            @confirm="seekClick"
          />
          <!-- <icon
            class="searchClick"
            type="search"
            size="20"
            color="#b1998d"
            @click="searchClick"
          />-->
          <span @click="searchClick">搜索</span>
        </div>
      </div>
    </div>
    <div class="list" v-if="shopType === 'dis'">
      <scroll-view
        class="scroll-wrap no-scroll-bar"
        style="height:calc(100% - 55px)"
        scroll-y
        @scrolltolower="handleLoadMore"
      >
        <div v-for="(item,idx) in list" :key="idx" class="goods-block">
          <img :src="item.goodsImg" mode="aspectFit" class="preview" />
          <div class="goods-info" @click="orderClick(item,'dis')">
            <p class="goods-name ellipsis">{{item.goodsName}}</p>
            <div class="goods-price" v-if="item.goodsKind !== 'INTEGRAL'">
              <div class="newShowMoney">
                <p>{{item.goodsDiscount}}</p>
                <span class="amount">{{item.goodsAmount}}</span>
              </div>
              <span class="discount">赚：{{item.disAmount}}</span>
            </div>
            <p class="goods-price" v-else>
              <span class="discount">{{item.goodsCost}}</span>
              <span class="icon">积分商品</span>
            </p>
          </div>
          <div class="edit-block">
            <button
              class="edit-btn"
              size="mini"
              @click="disMoneyClick(item)"
            >去分销</button>
          </div>
        </div>
        <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
      </scroll-view>
    </div>
    <div
      :class="isLinkSeek ? 'stockList1' : 'stockList2'"
      class="stockList"
      v-else
    >
      <scroll-view
        class="scroll-wrap"
        scroll-y
        @scrolltolower="handleLoadMore2"
      >
        <div class="box">
          <div class="list" v-for="(item,idx) in list2" :key="idx">
            <div class="previewBox">
              <img :src="item.goodsImg" mode="aspectFit" class="preview" />
            </div>
            <div class="content">
              <p class="ellipsis-2">{{item.goodsName}}</p>
              <div>
                <div class="newShowMoney">
                  <p>{{item.goodsAmount}}</p>
                  <span class="amount">{{item.stockSupplyCost}}</span>
                </div>
                <button @click="orderClick(item,'stock')">去进货</button>
              </div>
            </div>
          </div>
        </div>
        <p v-if="alreadyLastPage2" class="end-tip">没有更多了</p>
      </scroll-view>
    </div>
    <AlertBox :dateInfo="dateInfo" @change="AlertBoxChange" :isAlert="isAlert"></AlertBox>
  </div>
</template>

<script>
import AlertBox from '@/components/AlertBox'
import { getCurrentPageParams } from '@/utils'
import {
  FIND_SHOP_GOODS_PAGE,
  CREATE_GOODS_DIS_API,
  FIND_STOCK_GOODS_PAGE
} from '@/api'

export default {
  components: { AlertBox },
  props: {},
  data () {
    return {
      seek: '',
      goodsList: [],
      currentPage: 1,
      alreadyLastPage: false,
      goodsList2: [],
      currentPage2: 1,
      alreadyLastPage2: false,
      isSeek: false,
      dateInfo: {},
      isAlert: false,
      shopType: 'dis',
      isLinkSeek: true
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    list () {
      return this.goodsList.map(_ => ({
        goodsAmount: '￥' + (_.goodsAmount * 1).toFixed(2),
        disAmount: '￥' + (_.disAmount * 1).toFixed(2),
        goodsDiscount: '￥' + (_.goodsDiscount * 1).toFixed(2),
        goodsName: _.goodsName,
        goodsNo: _.goodsNo,
        goodsStock: _.goodsStock,
        goodsImg: _.goodsImg,
        goodsKind: _.goodsKind,
        goodsCost: '￥' + (_.goodsCost * 1).toFixed(2)
      }))
    },
    list2 () {
      return this.goodsList2.map(_ => ({
        goodsAmount: _.goodsAmount
          ? '￥' + (_.goodsAmount * 1).toFixed(2)
          : '￥0.00',
        disAmount: '￥' + (_.disAmount * 1).toFixed(2),
        goodsDiscount: '￥' + (_.goodsDiscount * 1).toFixed(2),
        goodsName: _.goodsName,
        goodsNo: _.goodsNo,
        goodsStock: _.goodsStock,
        goodsImg: _.goodsImg,
        goodsKind: _.goodsKind,
        goodsCost: '￥' + (_.goodsCost * 1).toFixed(2),
        stockSupplyCost: _.stockSupplyCost
          ? '￥' + (_.stockSupplyCost * 1).toFixed(2)
          : '￥0.00'
      }))
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onReady () {},
  onLoad () {},
  onShow () {
    this.$cookie.remove('describe-img1')
    this.$cookie.remove('describe-img2')
    this.shopType = getCurrentPageParams('type')
    this.goodsList = []
    this.currentPage = 1
    this.goodsList2 = []
    this.currentPage2 = 1
    this.seek = ''
    this.isLinkSeek = !!getCurrentPageParams('isLinkSeek')

    if (getCurrentPageParams('goodsTypeName')) {
      wx.setNavigationBarTitle({
        title: getCurrentPageParams('goodsTypeName')
      })
    }
    if (getCurrentPageParams('type') === 'stock') {
      wx.setNavigationBarTitle({
        title: '搜索'
      })
    }

    if (!getCurrentPageParams('isLinkSeek')) {
      this.isSeek = false
      if (this.shopType === 'dis') {
        this.getGoodsList()
      } else {
        this.getGoodsList2()
      }
    } else {
      this.isSeek = true
    }
  },
  methods: {
    seekClick () {
      const vm = this
      if (vm.shopType === 'dis') {
        vm.goodsList = []
        vm.currentPage = 1
        vm.getGoodsList()
      } else {
        vm.goodsList2 = []
        vm.currentPage2 = 1
        vm.getGoodsList2()
      }
    },
    searchClick () {
      const vm = this
      if (vm.shopType === 'dis') {
        vm.goodsList = []
        vm.currentPage = 1
        vm.getGoodsList()
      } else {
        vm.goodsList2 = []
        vm.currentPage2 = 1
        vm.getGoodsList2()
      }
    },
    seekChange (e) {
      this.seek = e.target.value
    },
    orderClick (item, type) {
      this.$router.push(
        `/pages/shop-management/dis/dis-shop-info/main?goodsNo=${
          item.goodsNo
        }&type=${type}`
      )
    },
    dateTime (value) {
      if (value) {
        return value.split(' ')[0]
      } else {
        return ''
      }
    },
    AlertBoxChange (val) {
      this.isAlert = val
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this.getGoodsList()
      }
    },
    handleLoadMore2 () {
      if (!this.alreadyLastPage2) {
        this.getGoodsList2()
      }
    },
    disMoneyClick (item) {
      const vm = this
      // wx.showModal({
      //   title: `可赚钱佣金：${item.disAmount}`,
      //   content: `供货价：${item.goodsDiscount}`,
      //   showCancel: true,
      //   confirmText: '确定',
      //   confirmColor: '#5d93fd',
      //   success: function (res) {
      //     if (res.confirm) {
      vm.createGoodsShop(item.goodsNo)
      //     } else if (res.cancel) {
      //     }
      //   }
      // })
    },
    createGoodsShop (goodsNo) {
      const vm = this
      CREATE_GOODS_DIS_API(vm.$store.state.account.shopId, goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            // vm.$alert('分销商品成功', '').then(() => {})
            vm.dateInfo = {
              src:
                'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/fenxiaocheng.png',
              title: '',
              label: '分销成功'
            }
            vm.isAlert = true
          } else if (r.data.code === 'GOODS-DIS-HAS-EXIST') {
            vm.dateInfo = {
              src:
                'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/fenxiaocheng.png',
              title: '提示',
              label: '此商品已分销，您可在我的分销中查看'
            }
            vm.isAlert = true
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },

    getGoodsList () {
      const vm = this

      let params = {
        providerId: vm.account.providerId,
        state: 1,
        isDis: 'Y'
      }
      if (getCurrentPageParams('goodsPlatformTypeId')) {
        params.goodsPlatformTypeId = getCurrentPageParams('goodsPlatformTypeId')
      }
      if (vm.seek) {
        params = {
          goodsName: vm.seek,
          state: 1,
          isDis: 'Y'
        }
      }
      FIND_SHOP_GOODS_PAGE(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    printList (list, isFirst, isLast) {
      if (isFirst) {
        this.goodsList = list
        if (isLast || !list.length) {
          // only one page
          this.alreadyLastPage = true
        } else {
          // has next page
          this.alreadyLastPage = false
          this.currentPage += 1
        }
      } else if (isLast) {
        // more than one page and this is the last page
        this.goodsList.push(...list)
        this.alreadyLastPage = true
      } else {
        // middle page
        this.goodsList.push(...list)
        this.alreadyLastPage = false
        this.currentPage += 1
      }
    },

    getGoodsList2 () {
      const vm = this

      let params = {
        providerId: vm.account.providerId,
        state: 1,
        excludeShopId: vm.account.shopId
        // isDis: 'Y'
      }
      if (getCurrentPageParams('goodsPlatformTypeId')) {
        params.goodsPlatformTypeId = getCurrentPageParams('goodsPlatformTypeId')
      }
      if (vm.seek) {
        params = {
          goodsName: vm.seek,
          state: 1,
          excludeShopId: vm.account.shopId
          // isDis: 'Y'
        }
      }
      FIND_STOCK_GOODS_PAGE(params, vm.currentPage2, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            vm.printList2(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    printList2 (list, isFirst, isLast) {
      if (isFirst) {
        this.goodsList2 = list
        if (isLast || !list.length) {
          // only one page
          this.alreadyLastPage2 = true
        } else {
          // has next page
          this.alreadyLastPage2 = false
          this.currentPage2 += 1
        }
      } else if (isLast) {
        // more than one page and this is the last page
        this.goodsList2.push(...list)
        this.alreadyLastPage2 = true
      } else {
        // middle page
        this.goodsList2.push(...list)
        this.alreadyLastPage2 = false
        this.currentPage2 += 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.banner {
  width: 100%;
  position: relative;
  .cont {
    display: flex;
    justify-content: space-between;
    .search {
      // position: relative;
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      .input {
        background: #ececec;
        width: 220px;
        height: 32px;
        border-radius: 25px;
        padding-left: 40px;
        margin-right: 30px;
      }
      span {
        font-size: 14px;
        color: #000;
      }
    }
  }
}
.tabDiv {
  display: flex;
  align-items: center;
  div {
    display: flex;
    width: 230px;
    height: 30px;
    margin: auto;
    border-radius: 25px;
    border: 1px solid #ea4835;
    p {
      width: 50%;
      font-size: 15px;
      line-height: 30px;
      text-align: center;
      border-radius: 25px;
    }
    .tabCheck {
      color: #fff;
      background: linear-gradient(to right, #ea4835, #ff7d69);
    }
    .tabUncheck {
      color: #ea4835;
      background: #fff;
    }
  }
  .newWordImg {
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
  }
}
.list {
  height: calc(100%);
  > .scroll-wrap {
    .goods-block {
      width: calc(100% - 20px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      margin: 0 10px 10px;
      // box-shadow: 0 0 8px lighten($blue, 20%);
      height: 80px;
      position: relative;
      overflow: hidden;
      transform: translateY(10px);
      > .preview {
        width: 48px;
        height: 48px;
      }
      > .goods-info {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 14px;
        width: calc(100% - 150px);
        > .goods-price {
          > .newShowMoney {
            font-size: 13px;
            display: flex;
            > .amount {
              color: $gray;
              text-decoration: line-through;
              margin-left: 10px;
            }
          }
          > .discount {
            display: inline-block;
            color: $red;
            min-width: 50px;
            padding-right: 10px;
          }

          > .icon {
            border-radius: 4px;
            border: 1px solid #5d93fd;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            padding: 2px 3px;
          }
        }
      }
      > .edit-block {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 55px;
        > .goods-stock {
          font-size: 14px;
          color: #cccccc;
        }
        > .tag {
          font-size: 10px;
          color: $white;
          background-color: $blue;
          position: absolute;
          top: -5px;
          right: -35px;
          padding: 15px 30px 2px;
          transform: rotate(45deg);
          &.danger {
            background-color: $red;
          }
        }
        > .tagImg {
          width: 38px;
          height: 38px;
          background: #fff;
          position: absolute;
          top: 0;
          right: 0;
        }
        > .edit-btn {
          width: 40px;
          border-radius: 25px;
          display: block;
          // color: $white;
          color: #ef250b;
          font-size: 10px;
          // background-color: $blue;
          border: 1px solid #ef250b;
          padding: 0;
          height: 20px;
          line-height: 20px;
        }
      }
    }
    .end-tip {
      margin: 0;
      padding: 15px;
      text-align: center;
      color: $gray;
      font-size: 15px;
    }
  }
}
.stockList1 {
  height: calc(100% - 50px);
}
.stockList2 {
  height: 100%;
}
.stockList {
  background: #f6f8f9;
  .scroll-wrap {
    height: calc(100%);
    .box {
      > .list {
        width: 100%;
        display: flex;
        align-items: center;
        background: #fff;
        margin-bottom: 15px;
        > .previewBox {
          width: 140px;
          height: 140px;
          display: flex;
          justify-content: center;
          align-items: center;
          > .preview {
            width: 90px;
            height: 90px;
            border-radius: 6px;
          }
        }
        > .content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: calc(100% - 140px - 15px);
          height: 90px;
          > p {
            color: #000;
            font-size: 16px;
          }
          > div {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            > .newShowMoney {
              > p {
                font-size: 13px;
                color: $gray;
                text-decoration: line-through;
              }
              > span {
                font-size: 16px;
                color: #000;
              }
            }
            button {
              border-radius: 25px;
              background: #fff;
              font-size: 14px;
              color: #ef250b;
              border: 1px solid #ef250b;
              line-height: 14px;
              padding: 3px 8px;
              margin: 0;
            }
          }
        }
      }
    }
    .end-tip {
      margin: 0;
      padding: 15px;
      text-align: center;
      color: $gray;
      font-size: 15px;
    }
  }
}
</style>
